<template>
	<view class="quan">
		<form @submit="formSubmit" @reset="formReset">
			<view class="top2">兑换手续费为兑换数量的{{ num }}%</view>
			<view class="company_zh"><view class="zh_text">对方账号</view><input class="zh" type="text" name="yh_tel" placeholder="请填写对方手机号码" /></view>
		<!-- 变现金额 -->
		<view class="cash_in">
				<view class="title">转赠数量</view>
				<view class="input_num"><view class="input_left">￥</view><input class="num" name="num" placeholder="请输入转赠数量"  /></view>
				<view class="balance">余额数量{{option_sum}}</view>
			</view>
		<!-- 验证码 -->
			<view class="cash_in_yzm"><view class="yzm_text">验证码</view><input class="yzm" type="text" name="yzm" placeholder="手机验证码" />
			<view v-if="show_yzm">
				<view class="yzm_btn" @tap="yzm">获取验证码</view>
			</view>
			<view v-else>
				<view class="yzm_btn2">剩余{{seconde}}s</view>
			</view>
			</view>
			<!-- 变现按钮 -->
			<view class="btn"><button type="primary" form-type="submit">确认转赠</button></view>
			</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				look: true,
				show_yzm:true,
				company:"",
				num:"10.0",
				seconde:'60',
				tel:'',
				option_id:'',
				option:'',
				option_sum:'',
			}
		},
		onLoad() {
			// 余额公司
			uni.request({
					url: 'http://tuiguang.yiyunoto.com/api/member/exchangeoption',
					header: { authtoken: this.$store.state.token },
					success: res => {
						console.log('11请求成功', res);
						this.option = res.data.data.compony[0];
						this.option_id=res.data.data.compony[0].id;
						this.tel=res.data.data.phone
					},
					fail: res => {
						console.log('请求失败', res);
					}
				});
			
			
			uni.request({
				url:'http://tuiguang.yiyunoto.com/api/member/giveoption',
				header:{authtoken:this.$store.state.token},
				// method:'POST',
				success:(res)=>{
					console.log("123请求成功",res)
					this.tel=res.data.data.phone
					this.option_sum=res.data.data.mem_qiquan[0].num
				},
				fail:(res)=>{
					console.log("请求失败",res)
				}
			})},
		methods: {
			onPullDownRefresh: function() {
				uni.request({
					url:'http://tuiguang.yiyunoto.com/api/member/giveoption',
					header:{authtoken:this.$store.state.token},
					success:(res)=>{
						console.log("请求成功",res)
						this.tel=res.data.data.phone
						 uni.stopPullDownRefresh();
					},
					fail:(res)=>{
						console.log("请求失败",res)
					}
				})
			},
			yzm:function(){
				console.log("获取验证码",this.tel)
					const requestTask =uni.request({
							url: 'http://tuiguang.yiyunoto.com/api/login/smsSend',
							header:{authtoken:this.$store.state.token},
							method:'POST',
							// headers:{'Content-Type':'application/json'},
							data:{
								phone:this.tel
							},
								success: (res) => {
									this.$api.msg(res.data.msg)
									if(res.data.msg=="短信验证码发送成功"){
									this.show_yzm=false,
									setInterval(()=>{
										--this.seconde
									},1000)
									setTimeout(()=>{
										this.show_yzm=true,
										this.seconde=60},
										60000
									)}
							console.log("ya",res.data.msg)							// console.log(res.data.data);
							}
						});
				},
				formSubmit: function(e) {
					console.log(e.detail.value)
					this.yhxx = e.detail.value
					var content = this.yhxx
					uni.request({
						url: 'http://tuiguang.yiyunoto.com/api/member/giveoption',
						header:{authtoken:this.$store.state.token},
						method: 'POST',
						data: {
							qid: this.option_id,
							tphone: content.yh_tel,
							option:content.num,
							code:content.yzm,
						},
						success: (res) => {
							console.log("提现成功", res)
							this.$api.msg(res.data.msg)
							if (res.data.msg == "提现成功") {
								uni.navigateTo({
									url: '../index/index'
								})
							}
							console.log(res.data.data);
						},
						fail: (res) => {
							console.log("登录失败", res)
							uni.showToast({
								title: res.data.msg
							})
						}
					});
				}
		}
	}
</script>

<style>
	.quan{
		width: 100%;
		height: 100vh;
		background: #F7F7F7;
	}
	.top{
		width: 100%;
		height:220upx;
		padding-top: 80upx;
		background: #FFFFFF;
		border-bottom: 1upx solid #E6E6E6;
		box-sizing: border-box;
	}
	.top2 {
		width: 100%;
		height: 70upx;
		text-align: center;
		background: #fdefd4;
		color: #5f321f;
		font-size: 28upx;
		padding-top: 20upx;
		box-sizing: border-box;
	}
	.top_title{
		width:60%;
		height: 100%;
		padding-top: 20upx;
		padding-left: 300upx;
		float: left;
		box-sizing: border-box;
		
	}
	.top_detail{
		width: 40%;
		height: 100%;
		font-size: 28upx;
		color: #666666;
		padding-top: 40upx;
		padding-left: 150upx;
		float:left;
		box-sizing: border-box;
	}
	.add_bank{
		width: 100%;
		height:145upx ;
		margin-bottom: 18upx;
		background: #FFFFFF;
	}
	.bank_left{
		width: 80%;
		height: 100%;
		float: left;
		padding-top: 30upx;
		padding-left:30upx ;
		box-sizing: border-box;
	}
	.company_name{
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.company_num{
		color:#7F7F7F;
		font-size: 26upx;
	}
	.right_icon{
		width: 15upx;
		height: 28upx;
		float: right;
		padding:50upx 30upx 0upx 0upx;
	}
	.cash_in{
		width: 100%;
		background: #FFFFFF;
	}
	.title{
		width: 100%;
		height:50upx;
		padding:23upx 30upx ;
		box-sizing: border-box;
	}
	.input_num{
		width: 90%;
		height:90upx;
		border-bottom: #E6E6E6 1upx solid;
		padding-left:30upx;
		margin-top: 20upx;
		padding-bottom: 20upx;
		box-sizing: border-box;
	}
	.input_left{
		width: 10%;
		height: 100%;
		padding-top:30upx;
		float: left;
		box-sizing: border-box;
	}
	.num{
		width:70%;
		height: 100%;
		padding-top:20upx;
		float: left;
	}
	.balance{
		width: 100%;
		padding-top:20upx;
		padding-left: 30upx;
		font-size: 26upx;
		color:#B7B7B7;
		padding-bottom: 50upx;
		box-sizing: border-box;
	}
.cash_in_yzm{
		width: 100%;
		height: 100upx;
		padding: 30upx 30upx;
		margin-top:18upx ;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.yzm_text{
		width:25%;
		float: left;
		
	}
	.yzm {
		width:50%;
		float: left;
	}

	.yzm_btn {
		width: 25%;
		font-size: 26upx;
		text-align: right;
		float: right;
		color: blue;

	}
	.yzm_btn2{
		width: 25%;
		font-size: 26upx;
		text-align: right;
		float: right;
		color: #DBDADA;
	}
	.btn {
		width: 90%;
		margin: 80upx auto 30upx;
	}
	.rule{
		width:100%;
		text-align: center;
		font-size:28upx ;
		color:#929292;
	}
	.company_zh{
			width: 100%;
			height: 110upx;
			padding: 30upx 30upx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-bottom:#E6E6E6 solid 1upx ;
		}
		.zh_text{
			width:25%;
			float: left;
		}
		.zh{
		width:55%;
		float: left;
	}
		
</style>
